<template>
	<view class="shebei-head">
		<!-- 标题 -->
		<view id='scroll'>
			<view class="head">
				<image src="../../static/shebei/back.png" mode="" @click="back"></image>
				<h3>设备</h3>
			</view>
			<!-- 设备与游戏机 -->
			<view class="box">
			
				<view class="box1" @click="select(0)" :class="selected==0? 'selected' : null">
					<image src="../../static/shebei/shebei.png" mode="" class="sb"></image>
					<text class="sbz">{{$t('shebei.head.device')}}</text>
					<text class="sbs">{{sheb}}</text>
					<image src="../../static/shebei/goin.png" mode="" class="go" @click="itc"></image>
				</view>
				<view class="box1" :class="selected==1? 'selected' : null" @click="select(1)">
					<image src="../../static/shebei/youxj.png" mode="" class="sb"></image>
					<text class="sbz">{{$t('shebei.head.game')}}</text>
					<text class="sbs">{{youxj}}</text>
					<image src="../../static/shebei/goin.png" mode="" class="go" @click="game"></image>
				</view>
			</view>
		</view>

		<swiper :current="selected" @change="current" class="swiper">
			<swiper-item>
				<view class="swiper-item">
					<!-- 未激活设备 -->
					<view class="box4">
						<h3>{{$t('shebei.head.deviceManagement')}}</h3>
						<mescroll-uni ref="mescrollRef" @init="mescrollInit" @up="upCallback" :down="{use:false}" top="130">
							<!-- 未激活设备 -->
							<view class="box5" v-for="(a,index) in HNTs" :key="index">
								<view class="box6">
									<view class="quan">
							<image  :src="a.state== 1 ? '../../static/shebei/img.png' : '../../static/get/a.png'" mode=""></image>
										<text>{{a.state == 1 ? '正常' : '未激活'}}</text>
									</view>
									<text class="k1"><text class="k2">{{a.title}}</text> {{a.titleMsg}}</text>
									<text class="k3">今日产出：{{a.profit || 0}}HNT</text>
								<!-- 按钮 -->
								<view class="btn">
								<button class="btn1" @click="goHNT(a.goods_id)">{{$t('shebei.head.manageDevice')}}</button>
								<button class="btn2" v-if="a.state==0" @click="renew(a.goods_id,index)">{{$t('shebei.head.renew')}}</button>
								</view>
								</view>
							</view>
							

						</mescroll-uni>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="boxEmpty">
					<u-empty
						mode="permission"
						text="暂未开通"
						icon="http://cdn.uviewui.com/uview/empty/permission.png"
					>
					</u-empty>
				</view>
				
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import api from '../../common/api.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		components: {
			mixins: [MescrollMixin],
		},
		data() {
			return {
				sheb: '2',
				youxj: '0',
				selected: 0,
				pagesSheb: 1,
				shebeis: [],
				FILs: [],
				HNTs: [],
				token: '',
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				scrollheight: 475
			};
		},
		mounted() {
			let that =  this
			const query = uni.createSelectorQuery().in(this);
			query.select('#scroll').boundingClientRect(data => {
				console.log('data', data.height)
				uni.getSystemInfo({
				    success: function (res) {
						console.log('data', res.screenHeight)
						let screenHeight = (res.screenHeight - data.height - 45) * 2
						that.scrollheight = screenHeight
				    }
				});
			}).exec();
		},
		methods: {
			select(e) {
				// this.selected = e.detail.index
				if (this.selected == e) return
				this.selected = e
				this.$api.sendRequest({
					url: api.MACHUBE_LIST,
					data: {
						page: 1,
						top_goods_class_id: e + 1
					},
					success: res => {}
				});
			},
			current(e) {
				this.selected = e.detail.current
			},
			back() {
				uni.switchTab({
					url: '../../pages/home/home'
				})
			},
			renew(a, b) {
				//续费
				uni.navigateTo({
					url: '../../pages/renew/renew?id='+a
				})
			},
			goFIL(e) {
				console.log(e);
				uni.navigateTo({
					url: '../../pages/myshebei-info/myshebei-info?id='+e
				})
			},
			goHNT(e) {
				uni.navigateTo({
					url: '../../pages/myshebei-info/myshebei-info?id='+e
				})

			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			upCallback(page) {
				this.$api.sendRequest({
					url: api.MACHUBE_LIST,
					data: {
						page: page.num,
						top_goods_class_id: this.selected + 1
					},
					success: res => {
						// 设备
						console.log(999, res.data);
						let curPageData = res.data.data;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)

						//设置列表数据
						if (page.num == 1) this.HNTs = []; //如果是第一页需手动置空列表
						this.HNTs = this.HNTs.concat(curPageData); //追加新数据

						console.log('curPageLen, res.total', curPageLen, res.data.total)
						this.mescroll.endBySize(curPageLen, res.data.total)
					}
				})
			}
		},
		created() {
			// 数量
			this.$api.sendRequest({
				url: api.MACHUBE_COUNT,
				success: res => {
					console.log(res);
					// // 设备
					this.sheb = res.data[0].count
					// // 游戏
					// this.youxj = res.data[1].count
				}
			})

			// 设备
			this.$api.sendRequest({
				url: api.MACHUBE_LIST,
				data: {
					page: this.pagesSheb,
					top_goods_class_id: this.selected + 1
				},
				success: res => {
					console.log(res.data.data);
					this.HNTs=res.data.data
				}
			});
		}
	}
</script>

<style scoped>
	.shebei-head {
		width: 100%;
		background: linear-gradient(to bottom, #DCEAFF 10%, #FFFFFF 50%);
		margin-bottom: 20rpx;
		height: 600rpx;
	}

	.head {
		position: relative;
	}

	.head>image {
		position: absolute;
		width: 30rpx;
		height: 40rpx;
		left: 20rpx;
		top: 20rpx;
		opacity: .8;
	}

	.head>h3 {
		text-align: center;
		padding-top: 20rpx;
	}

	.box {
		width: 94%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-items: flex-start;
		margin: auto;
	}

	.box1 {
		width: 40%;
		height: 140rpx;
		margin: 40rpx 0;
		border-radius: 16rpx;
		box-shadow: 0 0 6rpx 6rpx rgba(0, 0, 0, 0.06);
		position: relative;
	}

	.selected {
		border: 1px solid #005FDB;
		opacity: .8;
	}

	swiper {
		height: 76vh;
	}

	scroll-view {
		height: 60vh;
	}

	.sb {
		width: 32rpx;
		height: 20rpx;
		position: relative;
		left: 30rpx;
		top: 16rpx;
	}

	.go {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 40rpx;
		top: 50rpx;
	}

	.sbz {
		font-weight: bold;
		font-size: .8em;
		position: absolute;
		left: 80rpx;
		top: 20rpx;
	}

	.sbs {
		font-weight: bold;
		font-size: 1.1em;
		position: absolute;
		top: 76rpx;
		left: 60rpx;
	}

	.box3 {
		margin: auto;
		width: 90%;
		box-shadow: 0 0 9rpx 9rpx rgba(0, 0, 0, .06);
		position: relative;
		border-radius: 8rpx;
	}

	.box3-h {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		left: 40rpx;
		top: 44rpx;
	}

	.box3>text {
		font-weight: bold;
		opacity: .9;
		position: absolute;
		left: 120rpx;
		top: 50rpx;
		font-size: 40rpx;
	}

	.box3-go {
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		right: 40rpx;
		top: 60rpx;
	}

	.box4 {
		width: 90%;
		margin: 40rpx auto;
	}
	.box4>h3{
		margin: 16rpx 0;
	}
	.box5 {
		margin: 20rpx 10rpx;
		padding: 24rpx 16rpx;
		position: relative;
		box-shadow: 0 0 6rpx 6rpx rgba(0, 0, 0, .09);
		border-radius: 16rpx;
	}

	.box6 {
		height: 220rpx;
	}

	.quan {
		width: 160rpx;
		height: 140rpx;
		background-color: #F8F8F8;
		position: absolute;
		top: 60rpx;
		left: 60rpx;
	}

	.quan>image {
		width: 120rpx;
		height: 80rpx;
		margin-left: 20rpx;
	}

	.quan>text {
		font-size: .7em;
		width: 160rpx;
		display: inline-block;
		text-align: center;
		margin-top: 30rpx;
		background-color: #EBEBEB;
		opacity: .5;
	}

	.quan2 {
		width: 160rpx;
		height: 100rpx;
		background-color: #F8F8F8;
		position: absolute;
		top: 60rpx;
		left: 60rpx;
	}

	.quan2>image {
		width: 120rpx;
		height: 80rpx;
		margin-left: 20rpx;
	}

	.quan2>text {
		font-size: .7em;
		width: 160rpx;
		display: inline-block;
		text-align: center;
		margin-top: 30rpx;
		background-color: #D5EFD2;
		opacity: .5;
	}

	.k1 {
		font-weight: 550;
		position: absolute;
		left: 220rpx;
		top: 40rpx;
		font-weight: bold;
		opacity: .7;
	}

	.k2 {
		color: #007AFF;
		margin-right: 10rpx;
	}

	.k3 {
		font-size: .7em;
		opacity: .5;
		position: absolute;
		left: 220rpx;
		top: 100rpx;
	}

	.btn {
		display: flex;
		float: right;
		margin-top: 160rpx;
	}

	.btn>button {
		/* float: right; */
		/* width: 160rpx; */
		font-size: .74em;
		height: 60rpx;
		line-height: 60rpx;
	}

	.btn1 {
		color: #397CE7;
		background-color: #EBF1FD;
	}

	.btn2 {
		color: white;
		background-color: #397CE7;
		margin-left: 30rpx;
	}
</style>
